<template>
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-2xl font-bold mb-6">评价订单</h2>

      <!-- 商品信息 -->
      <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-4 flex items-center gap-4">
          <img
            :src="orderItem.product_image"
            :alt="orderItem.product_name"
            class="w-20 h-20 object-cover rounded"
          >
          <div class="flex-1">
            <h4 class="font-medium">{{ orderItem.product_name }}</h4>
            <p class="text-gray-500 text-sm mt-1">
              ¥{{ orderItem.price }} × {{ orderItem.quantity }}
            </p>
          </div>
        </div>
      </div>

      <!-- 评价表单 -->
      <div class="bg-white rounded-lg shadow p-6">
        <el-form
          ref="formRef"
          :model="reviewForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="评分" prop="rating">
            <el-rate
              v-model="reviewForm.rating"
              :texts="['很差', '较差', '一般', '不错', '很好']"
              show-text
            />
          </el-form-item>

          <el-form-item label="评价" prop="content">
            <el-input
              v-model="reviewForm.content"
              type="textarea"
              rows="4"
              placeholder="请分享您的使用体验..."
              maxlength="500"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              v-model:file-list="fileList"
              action="/api/upload"
              list-type="picture-card"
              :limit="6"
              :on-success="handleUploadSuccess"
              :before-upload="beforeUpload"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交评价</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getOrderItem, submitReview } from '@/api/orders'

const route = useRoute()
const router = useRouter()
const formRef = ref()
const fileList = ref([])

// 订单商品信息
const orderItem = ref({})

// 评价表单
const reviewForm = ref({
  rating: 5,
  content: '',
  images: []
})

// 表单验证规则
const rules = {
  rating: [
    { required: true, message: '请选择评分', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请填写评价内容', trigger: 'blur' },
    { min: 10, message: '评价内容至少10个字', trigger: 'blur' }
  ]
}

// 获取订单商品信息
const fetchOrderItem = async () => {
  try {
    const { orderId, itemId } = route.params
    orderItem.value = await getOrderItem(orderId, itemId)
  } catch (error) {
    ElMessage.error('获取订单信息失败')
    router.back()
  }
}

// 图片上传前检查
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 图片上传成功
const handleUploadSuccess = (response) => {
  reviewForm.value.images.push(response.url)
}

// 提交评价
const handleSubmit = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        await submitReview({
          orderItemId: orderItem.value.id,
          ...reviewForm.value
        })
        ElMessage.success('评价成功')
        router.push('/orders')
      } catch (error) {
        ElMessage.error('评价失败')
      }
    }
  })
}

onMounted(() => {
  fetchOrderItem()
})
</script> 